import React ,{useState,useEffect} from 'react'
import {
    Input, 
    Select,  
    Space ,
    Button,  
    Table, 
    Form, 
    Tooltip,
    Modal,
    message,
    } from 'antd'
import { SearchOutlined,DeleteOutlined, ExclamationCircleOutlined} from '@ant-design/icons';
import './index.scss'
import axios from '../../../../http/index';

export default function BehaviorLog() {
        // 表格数组 
         const [data, setdatas] = useState([])
        // 页面初始渲染
        useEffect(() => {
            Updata()
        },[])

        // 初始化请求封装
        const Updata = () =>{
            axios({
                method:'GET',
                url:'/system/per/actionLog/findActonLogList',
            })
            .then((res) => {
                console.log(res)
                // setdatas(res.data.data)
                const data = res.data.data
                for (let i = 0 ; i < data.length; i++) {
                    data[i].key = data[i].id
                }
                setdatas([...data])
                console.log(data)
            })
            .catch((err) => {
                console.log(err)
            })
        
        }
        // 表格表头
        const columns = [
        {
          title: '日志名称',
          key: 'username',
          dataIndex: 'username',
          align: 'center',
        //   排序
          sorter: (a, b) => a.username.length - b.username.length,
          multiple: 1,
        },
        {
          title: '操作人',
          key: 'nickname',
          dataIndex: 'nickname',
          sorter: (a, b) => a.nickname.length - b.nickname.length,
          align: 'center'
        },
        {
          title: '日志类型',
          key: 'dept_id',
          dataIndex: 'dept_id',
          align: 'center',
        },
        {
          title: 'IP地址',
          key: 'ip',
          dataIndex: 'ip',
          align: 'center',
        },
        {
          title: '日志消息',
          key: 'browser',
          dataIndex: 'browser',
          align: 'center',
          render: (text)=><Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
          onCell: () => {
            return {
              style: {
                maxWidth: 150,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow:'ellipsis',
                cursor:'pointer'
              }
            } 
        }
        },
        {
          title: '记录时间',
          key: 'time',
          dataIndex: 'time',
          align: 'center'
        },
        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          align: 'center',
          render: (text) => (
            <Space size="middle">
                
                <Button size='small'  onClick={() => clicksee(text)}>详细</Button>   
               
                <Button size='small' type="dashed" onClick={() => clickDetailed(text)} danger>删除</Button>
            </Space>
        ),
        },
    ];
    //复选框事件
    const [ datachange, setdata] = useState([ ]);
   
    const  onSelectChange = (datachange) => {
        console.log('单选框数组:', datachange);
        setdata( datachange );
    };

    const rowSelection = {
      onChange: onSelectChange,
      datachange,

    };
    // 获取复选框勾选的username
    const  onSelectusername = () => {
        for(let i = 0; i <= datachange.length; i++){
            let  mima = data.filter(Item => datachange[i] === Item.id)
                console.log("返回值密码:",mima)
                return mima[0].username
        }   
    }   

        // from表单
        const [form] = Form.useForm();

        // 类型
        const { Option } = Select;

        const onFinish = (values) => {
            console.log('表单值校验2:', values);
        };

        const searchchange2 = (values) =>{
            console.log(values)
        }

        //删除事件
        const { confirm } = Modal;
        const clickDetailed = (text) => {
            console.log("删除",text)
            confirm({
                title: '警示',
                icon: <ExclamationCircleOutlined />,
                content: '确定要删除吗',
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    axios({
                        method:'POST',
                        url:'/system/per/actionLog/delActionLog',
                        data:{
                           id: text,
                        }
                    })
                    .then((res) => {
                        console.log("返回值:",res)
                        setdatas(res.data.data)
                        console.log(data)
                        message.success('删除成功')
                        Updata()
                    })
                    .catch((err) => {
                        console.log(err)
                    })
                    console.log('OK');
                },
                onCancel() {
                    console.log('Cancel');
                },
        });
       }


        // 详情弹窗
        const [Editdata, setEditdata ] = useState({})
        const clicksee = (text) =>{
            setIsModalVisible5(true);
            let edit = data.filter(Item => Item.id === text)
            setEditdata(() => edit[0])
            console.log(edit)
            console.log(edit[0])
            console.log(text)
        }   

        const [isModalVisible5, setIsModalVisible5] = useState(false);
        const handleOk5 = async () => {
            setIsModalVisible5(false);
        };
    
    const handleCancel5 = () => {
        setIsModalVisible5(false);
    };


    return (
        <div className='product'>   
            {/* 头部搜索部分 */}
            <div className='search-top'>
                <Form name="register" 
                onFinish={onFinish}
                form={form}
                initialValues ={{
                    typecode: 1,
                }}>
                    <Space>
                        <div className='search-top1'>

                            <Input addonBefore="类型" style={{ width: '25%' }} />
                            <Form.Item
                                name="typecode"
                            >
                                <Select >
                                        <Option value= {1}>全部</Option>
                                        <Option value= {2}>业务</Option>
                                        <Option value= {3}>登录</Option>
                                        <Option value= {4}>系统</Option>
                                </Select>
                            </Form.Item>
                        </div>

                        <div className='search-top4'>
                            <Form.Item name="captcha">
                                <Input addonBefore="日志名称"  placeholder='请输入用户昵称'  style={{ width: 250 }}/>   
                            </Form.Item>
                        </div> 
                        <Form.Item>
                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            搜索
                            </Button>
                        </Form.Item>
                    </Space>
                </Form>
                <div>
                    <Button className='select-top'  type="primary" onClick={searchchange2} icon={<DeleteOutlined />}>清空日志</Button>
                </div>
            </div>

                {/* 表格部分 */}
                <div>
                    <Table rowSelection={rowSelection}  bordered columns={columns}  dataSource={data}   
                    // pagination = {false} 
                     />
                </div>


                {/* 详情弹窗 */}
                <div>
                    <Modal width={800} title="详细信息" visible={isModalVisible5} onOk={handleOk5} onCancel={handleCancel5}  okText="确认" cancelText="取消">
                        <div className='detailed'>
                            <div className='detailed-top'>
                                <div className='detailed-top1'>
                                基本信息
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small0' >日志编号</div>
                                    <div className='detailed-top-small2'>48885</div>
                                    <div className='detailed-top-small'>日志名称</div>
                                    <div className='detailed-top-small2'>用户登录</div>
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small0' >日志类型</div>
                                    <div className='detailed-top-small2'>无</div>
                                    <div className='detailed-top-small'>操作IP地址</div>
                                    <div className='detailed-top-small2'>{Editdata.ip}</div>
                                </div>


                                <div className='detailed-top1'>
                                        <div  className='detailed-top-small0' >产生日志的表</div>
                                        <div className='detailed-top-small2'>无</div>
                                        <div className='detailed-top-small'>产生日志数据id</div>
                                        <div className='detailed-top-small2'>无</div>
                                </div>

                                <div className='detailed-top1'>
                                        <div  className='detailed-top-small0' >操作人</div>
                                        <div className='detailed-top-small2'>超级管理员</div>
                                        <div className='detailed-top-small'>记录时间</div>
                                        <div className='detailed-top-small2'>{Editdata.time}</div>
                                </div>
                                <div className='detailed-top1'>
                                    <div className='detailed-top-small1'>切入点</div>
                                    <div className='detailed-top-small3' style ={{maxWidth: 580,overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis',cursor:'pointer' }}>{Editdata.browser}</div>
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small1'>
                                        日志消息
                                    </div>
                                    <div className='detailed-top-small3'>
                                        后台登录成功
                                    </div>
                                </div>
                            </div>

                         
                        </div>
                    </Modal>
                </div>
            
        </div>
    )
}
